<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- <img v-bind:src="01.jpg" />
        <p v-on:click.number="tt"></p> -->
        
        <p v-press>我是控制颜色的指令</p>

        <div v-demo:foo.a.b="message">我是自定义的指令</div>

        <p v-press2:left="200">我是控制元素位置的指令</p>
        <p v-press3>我是局部指令</p>
        
        <input type="text" v-focus><hr>
    </div>

    <div id="app2">
        <!-- <p v-press3>我是另一个Vue实例</p> -->
        <p>我是另一个Vue实例，我无法使用上面实例里面的v-press3</p>
    </div>

    <script src="../lib/Vue/vue.js"></script>
    <script>

        Vue.directive('press', {
            bind(el) {
                el.style.color = 'lightblue'
            }
        })

        Vue.directive('demo', {
            bind(el, binding, vnode) {
                console.log(el);
                console.log(binding);
                console.log(binding.name);
                console.log(binding.value);
                console.log(binding.expression);
                console.log(binding.arg);
                console.log(binding.modifiers);
                console.log(vnode);
            }
        })

        Vue.directive('press2', {
            bind(el, binding) {
                el.style.position = 'relative';
                // console.log(binding.expression);
                // console.log(binding.value);
                el.style[binding.arg == 'left' ? 'left' : 'top'] = binding.value + 'px'
            }
        })

        // 自动聚焦 的自定义指令
        Vue.directive('focus', {
            inserted(el) {
                el.focus();
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                message: '你好'
            },
            directives: {
                //局部的指令，只能在当前实例上使用 
                'press3': {
                    bind(el) {
                        el.style.color = 'pink'
                    }
                }
            }
        })

        var vm2 = new Vue({
            el: '#app2',
            data: {
                
            }
        })
    </script>
</body>
</html>